<template>
	<view class="container">
		<uni-card v-if="info.content" :is-shadow="false" is-full>
			<text>{{info.content}}</text>
		</uni-card>
		<uni-forms ref="baseForm" :modelValue="baseFormData">
			<uni-forms-item labelWidth="90px" class="form_item" label="选择行业" required name="industry">
				<uni-data-select v-model="baseFormData.industry" :localdata="info.industrys"
					:clear="false"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item labelWidth="90px" label="结算方式" required>
				<uni-data-checkbox v-model="baseFormData.paymode" :localdata="paymode" />
			</uni-forms-item>
			<view class="shuoming">【实时结算】由您自己设置店铺折扣，随时可修改，多米街用户到店扫码支付后，实时到您的收款账户</view>
			<view class="shuoming">【提前结算】平台提前给您充值现金，您送给平台一定的额度；多米街用户到店扫码消费此额度</view>
			<view style="color: red;margin: 10px 0px 0px 10px;" > 如修改结算方式，店铺上线后可联系您的业务经理</view>
			<!-- 			<uni-forms-item labelWidth="90px" label="是否连锁店" required>
				<uni-data-checkbox v-model="baseFormData.ischain" :localdata="chain" />
			</uni-forms-item> -->
			<uni-forms-item labelWidth="90px" label="门店位置" required name="address">
				<view class="position" @click="openMap">
					<text style="color: #000;" v-if="baseFormData.address">{{baseFormData.address}}</text>
					<text v-else>请选择位置</text>
				</view>
			</uni-forms-item>
			<view class="shuoming">● 定位的区域没有代理商，将无法提交</view>
			<uni-forms-item labelWidth="90px" label="店铺名称" required name="supname">
				<uni-easyinput v-model="baseFormData.supname" placeholder="如:老王烧烤、老王烧烤(**店)" />
			</uni-forms-item>
			<view style="color: red;margin: 10px 0px 0px 10px;" > 店铺名称提交后不可修改，请谨慎填写！</view>
			<!-- 			<uni-forms-item labelWidth="120px" label="当前单日营业额" required name="daysale">
				<uni-easyinput v-model="baseFormData.daysale" placeholder="当前单日营业额" />
			</uni-forms-item> -->
			<uni-forms-item labelWidth="90px" label="电话" required name="principalmobile">
				<uni-easyinput type="number" v-model="baseFormData.principalmobile" placeholder="电话" />
			</uni-forms-item>
			<uni-forms-item labelWidth="90px" label="联系人" required name="principalname">
				<uni-easyinput v-model="baseFormData.principalname" placeholder="联系人" />
			</uni-forms-item>
			<uni-forms-item labelWidth="90px" class="form_item" label="业务经理" required name="salemid">
				<uni-data-select v-model="baseFormData.salemid" :localdata="salers" :clear="false"></uni-data-select>
			</uni-forms-item>
			<view class="shuoming">
				● 通过审核后，该业务经理将联系您一对一培训
			</view>
			<uni-forms-item labelWidth="90px" class="form_item" label="门头照片或品牌LOGO" required name="logo">
				<uni-file-picker v-model="baseFormData.logo" mode="grid" :auto-upload="false" @select="uploadImg"
					limit="1"></uni-file-picker>
			</uni-forms-item>
			<button class="go_submit" type="primary" @click="submit('baseForm')">提交</button>
		</uni-forms>
	</view>
</template>


<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(["Location", "url"])
		},
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					industry: '',
					ischain: 0,
					supname: '',
					daysale: '',
					address: '',
					principalmobile: '',
					principalname: '',
					salemid: '',
					logo: {},
					lat: '',
					lng: '',
					paymode: 0
				},
				info: {
					content: '',
					industrys: [],
					salers: []
				},
				salers: [],
				paymode: [{
						text: '实时结算',
						value: 1
					},
					{
						text: '提前结算(充值卡模式)',
						value: 0
					}
				],

				// // 是否连锁店
				// chain: [{
				// 	text: '否',
				// 	value: 0
				// }, {
				// 	text: '是',
				// 	value: 1
				// }],


				rules: {
					industry: {
						rules: [{
							required: true,
							errorMessage: '请选择行业'
						}]
					},
					supname: {
						rules: [{
							required: true,
							errorMessage: '请填写店铺名称'
						}]
					},
					// daysale: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写单日营业额'
					// 	}]
					// },
					address: {
						rules: [{
							required: true,
							errorMessage: '请选择位置'
						}]
					},
					principalmobile: {
						rules: [{
								required: true,
								errorMessage: '请填写电话号'
							},
							{
								format: 'number',
								errorMessage: '请正确填写电话号'
							}
						]
					},
					principalname: {
						rules: [{
							required: true,
							errorMessage: '请填写联系人'
						}]
					},
					salemid: {
						rules: [{
							required: true,
							errorMessage: '请选择行业'
						}]
					},
					logo: {
						rules: [{
							validateFunction: function(rule, value, data, callback) {
								if (!value.url) {
									callback('请选择店铺图片')
								}
								return true
							}
						}]
					}
				}
			}
		},
		onReady() {
			this.$refs.baseForm.setRules(this.rules)
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$axios('apply/display', "POST", 'supplier').then(res => {
					if (res.data.code == 200) {
						let data = res.data.data;
						this.info.industrys = data.industrys.map(v => {
							return {
								value: v.id,
								text: v.name
							}
						})
						this.info.content = data.content;
					}
				})
			},
			uploadImg(e) {
				let that = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				let token = uni.getStorageSync('token');
				uni.uploadFile({
					url: that.url.upload,
					filePath: e.tempFilePaths[0],
					name: 'a',
					header: {
						token: token
					},
					formData: {
						'file': 'a'
					},
					success(res) {
						let data = JSON.parse(res.data);
						if (data.code == 200) {
							let extname = data.data.filename.split('.')[1];
							that.baseFormData.logo = {
								"name": data.data.url,
								"extname": extname,
								"url": data.data.url,
							};
							uni.showToast({
								title: '上传成功',
							})
						} else {
							uni.showToast({
								title: '上传失败请重试',
								icon: 'none'
							})
						}
					},
					fail() {
						uni.showToast({
							title: '上传失败请重试',
							icon: 'none'
						})
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			openMap() {
				let that = this;
				uni.chooseLocation({
					latitude: that.Location.y,
					longitude: that.Location.x,
					success(res) {
						that.baseFormData.address = res.address;
						that.baseFormData.lat = res.latitude;
						that.baseFormData.lng = res.longitude;
						that.$axios('apply/getSalers', 'POST', 'supplier', {
							address: res.address
						}).then(res => {
							if (res.data.code == 200) {
								that.salers = res.data.data.map(v => {
									return {
										value: v.id,
										text: v.nickname
									}
								})
							}
						})
					}
				});
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					let obj = {
						...this.baseFormData,
						logo: this.baseFormData.logo.url,
					}
					this.$axios('apply/submit', "POST", 'supplier', obj).then(res => {
						if (res.data.code == 200) {
							this.$api.msg('提交成功！');
							setTimeout(() => {
								this.$navTo('/pages/individualism/user')
							}, 500)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>


<style lang="scss">
	.container {
		padding-bottom: 100upx;
	}

	.uni-forms {
		padding: 0 20upx;
	}

	.uni-forms .uni-forms-item {
		margin-top: 30upx;
		margin-bottom: 0;
	}

	.shuoming {
		margin-top: 8px;
		padding-left: 6px;
		font-size: 26upx;
		color: #777;
	}


	.message {
		color: #999;
		font-size: 22upx;
	}

	.go_submit {
		margin-top: 70upx;
		line-height: 80upx;
	}

	.position {
		border: 1px #e5e5e5 solid;
		border-radius: 4px;
		color: #999;
		line-height: 35px;
		font-size: 12px;
		padding: 0 20upx;
	}
</style>